<!-- 留言板页面 - 提供留言发表、展示和分页功能，支持用户互动 -->
<template>
  <div class="guestbook-page">
    <!-- 统一导航栏组件 -->
    <AppHeader />

    <!-- 主要内容区域 -->
    <main class="main-content">
      <div class="content-wrapper">
        <!-- 页面头部区域 - 欢迎用户留言 -->
        <div class="hero-section">
          <div class="hero-content">
            <h1 class="hero-title">在这里留下你的足迹</h1>
            <p class="hero-subtitle">分享你的想法，连接更多朋友</p>
            <!-- 装饰性气泡动画 -->
            <div class="hero-decoration">
              <div class="floating-bubble bubble-1"></div>
              <div class="floating-bubble bubble-2"></div>
              <div class="floating-bubble bubble-3"></div>
            </div>
          </div>
        </div>

        <!-- 留言统计区域 - 显示留言相关统计数据 -->
        <div class="stats-section">
          <div class="stats-grid">
            <!-- 总留言数统计卡片 -->
            <div class="stat-card">
              <div class="stat-icon">
                <el-icon>
                  <ChatDotRound />
                </el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-number">{{ totalComments }}</div>
                <div class="stat-label">总留言数</div>
              </div>
            </div>
            <!-- 今日留言数统计卡片 -->
            <div class="stat-card">
              <div class="stat-icon">
                <el-icon>
                  <Calendar />
                </el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-number">{{ todayComments }}</div>
                <div class="stat-label">今日留言</div>
              </div>
            </div>
            <!-- 活跃用户数统计卡片 -->
            <div class="stat-card">
              <div class="stat-icon">
                <el-icon>
                  <User />
                </el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-number">{{ activeUsers }}</div>
                <div class="stat-label">活跃用户</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 留言表单区域 - 用户发表留言的表单 -->
        <div class="comment-form-section">
          <div class="form-container">
            <!-- 表单头部 - 用户头像 -->
            <div class="form-header">
              <div class="user-avatar">
                <img src="/src/assets/pic/avatar.jpg" alt="用户头像" />
              </div>
            </div>

            <!-- 留言表单 -->
            <form class="comment-form" @submit.prevent="submitComment">
              <!-- 昵称和网站输入行 -->
              <div class="form-row">
                <div class="form-field">
                  <label for="nickname">昵称</label>
                  <el-input id="nickname" v-model="formData.nickname" placeholder="请输入您的昵称"
                    :class="{ 'error': errors.nickname }" />
                  <span v-if="errors.nickname" class="error-message">{{ errors.nickname }}</span>
                </div>
                <div class="form-field">
                  <label for="website">网站</label>
                  <el-input id="website" v-model="formData.website" placeholder="请输入您的网站（可选）" />
                </div>
              </div>

              <!-- 邮箱输入字段 -->
              <div class="form-field">
                <label for="email">邮箱</label>
                <el-input id="email" v-model="formData.email" placeholder="请输入您的邮箱"
                  :class="{ 'error': errors.email }" />
                <span v-if="errors.email" class="error-message">{{ errors.email }}</span>
              </div>

              <!-- 留言内容输入字段 -->
              <div class="form-field">
                <label for="content">留言内容</label>
                <el-input id="content" v-model="formData.content" type="textarea" :rows="4" placeholder="请输入您的留言内容..."
                  :class="{ 'error': errors.content }" />
                <span v-if="errors.content" class="error-message">{{ errors.content }}</span>
              </div>

              <!-- 表单提交按钮 -->
              <div class="form-actions">
                <el-button type="primary" native-type="submit" :loading="isSubmitting" class="submit-btn">
                  {{ isSubmitting ? '提交中...' : '发表留言' }}
                </el-button>
              </div>
            </form>
          </div>
        </div>

        <!-- 留言展示区域 - 显示所有留言列表 -->
        <div class="comments-section">
          <div class="comments-container">
            <!-- 示例数据提示 -->
            <div v-if="isUsingSampleData" class="sample-data-notice">
              <el-alert
                title="示例数据"
                description="当前显示的是示例数据，因为后端服务暂时不可用。您可以正常浏览和测试页面功能。"
                type="info"
                :closable="false"
                show-icon>
              </el-alert>
            </div>

            <!-- 加载状态 -->
            <div v-if="isLoading" class="loading-state">
              <el-icon class="loading-icon">
                <Loading />
              </el-icon>
              <p>正在加载留言数据...</p>
            </div>

            <!-- 空状态 - 当没有留言时显示 -->
            <div v-else-if="comments.length === 0" class="empty-state">
              <el-icon class="empty-icon">
                <ChatDotRound />
              </el-icon>
              <p>还没有留言，快来发表第一条留言吧！</p>
            </div>

            <!-- 留言列表 - 循环渲染所有留言 -->
            <div v-else class="comments-list">
              <div v-for="comment in paginatedComments" :key="comment.id" class="comment-item">
                <!-- 留言头像 -->
                <div class="comment-avatar">
                  <img src="/src/assets/pic/avatar.jpg" alt="用户头像" />
                </div>
                <!-- 留言内容 -->
                <div class="comment-content">
                  <div class="comment-header">
                    <span class="comment-nickname">{{ comment.nickname }}</span>
                    <span class="comment-date">{{ formatDate(comment.date) }}</span>
                  </div>
                  <div class="comment-text">{{ comment.content }}</div>
                  <!-- 留言操作按钮 -->
                  <div class="comment-actions">
                    <button class="like-btn" @click="likeComment(comment.id)" :class="{ 'liked': comment.isLiked }">
                      <el-icon>
                        <Star />
                      </el-icon>
                      <span>{{ comment.likes || 0 }}</span>
                    </button>
                    <button class="reply-btn" @click="replyToComment(comment.id)">
                      <el-icon>
                        <ChatDotRound />
                      </el-icon>
                      <span>回复</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <!-- 分页组件 - 当留言数量超过每页显示数量时显示 -->
            <div v-if="comments.length > pageSize" class="pagination-wrapper">
              <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="comments.length"
                :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" background />
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 统一页脚组件 -->
    <AppFooter />
  </div>
</template>

<script setup lang="ts">
// ==================== 导入依赖 ====================

// Vue 3 组合式 API - 提供响应式数据、计算属性和响应式对象
import { ref, computed, reactive, onMounted } from 'vue'

// Element Plus 组件和图标 - 用于界面组件和图标显示
import { ElMessage } from 'element-plus'  // 消息提示组件
import { User, ArrowDown, ChatDotRound, Calendar, Loading, Star } from '@element-plus/icons-vue'  // 图标组件

// API工具和常量导入
import { get, post, API_PATHS } from '../utils/api'  // API请求工具

// 自定义组件导入
import AppHeader from '../components/AppHeader.vue'  // 统一导航栏组件
import AppFooter from '../components/AppFooter.vue'  // 统一页脚组件

// ==================== 类型定义 ====================

/**
 * 留言数据接口
 */
interface GuestbookComment {
  id: number
  nickname: string
  website?: string
  email: string
  content: string
  date: string
  likes?: number
  isLiked?: boolean
  replies?: GuestbookComment[]
}

/**
 * 留言统计接口
 */
interface GuestbookStats {
  totalComments: number
  todayComments: number
  activeUsers: number
}

/**
 * 提交留言数据接口
 */
interface SubmitCommentData {
  nickname: string
  website?: string
  email: string
  content: string
}

// ==================== 响应式数据 ====================

/**
 * 当前分页的页码
 * @description 用于分页组件，表示当前显示的是第几页，默认为第1页
 */
const currentPage = ref(1)

/**
 * 每页显示的留言数量
 * @description 控制分页组件中每页显示多少条留言，默认为10条
 */
const pageSize = ref(10)

/**
 * 是否正在提交留言
 * @description 控制提交按钮的加载状态，防止重复提交
 */
const isSubmitting = ref(false)

/**
 * 是否正在加载留言数据
 * @description 控制留言列表的加载状态
 */
const isLoading = ref(false)

/**
 * 错误信息
 * @description 存储API请求的错误信息
 */
const errorMessage = ref('')

/**
 * 是否正在使用示例数据
 * @description 标识当前是否显示示例数据
 */
const isUsingSampleData = ref(false)

/**
 * 示例留言数据
 * @description 当API请求失败时显示的示例数据
 */
const sampleComments: GuestbookComment[] = [
  {
    id: 1,
    nickname: '访客001',
    website: 'https://example.com',
    email: 'visitor001@example.com',
    content: '这是一个很棒的博客！内容很有价值，期待更多精彩的文章。',
    date: '2025-01-01 14:30:00',
    likes: 5,
    isLiked: false
  },
  {
    id: 2,
    nickname: '技术爱好者',
    website: '',
    email: 'tech@example.com',
    content: 'Vue 3 的内容写得非常详细，对我帮助很大，感谢分享！',
    date: '2025-01-02 09:15:00',
    likes: 12,
    isLiked: true
  },
  {
    id: 3,
    nickname: '前端开发者',
    website: 'https://frontend.dev',
    email: 'dev@example.com',
    content: '时间线页面的设计很赞，用户体验很好。希望可以添加更多功能。',
    date: '2025-01-03 16:45:00',
    likes: 8,
    isLiked: false
  },
  {
    id: 4,
    nickname: '设计爱好者',
    website: 'https://design.blog',
    email: 'design@example.com',
    content: '博客的视觉设计非常出色，配色和布局都很专业。',
    date: '2025-01-04 11:20:00',
    likes: 15,
    isLiked: false
  },
  {
    id: 5,
    nickname: '学生用户',
    website: '',
    email: 'student@example.com',
    content: '作为初学者，这些教程对我帮助很大，讲解得很清楚。',
    date: '2025-01-05 13:45:00',
    likes: 3,
    isLiked: true
  }
]

/**
 * 示例统计数据
 * @description 当API请求失败时显示的示例统计数据
 */
const sampleStats: GuestbookStats = {
  totalComments: 5,
  todayComments: 2,
  activeUsers: 5
}

/**
 * 表单数据对象
 * @description 存储用户输入的留言表单数据，使用reactive确保响应式更新
 */
const formData = reactive({
  nickname: '',  // 用户昵称
  website: '',   // 用户网站（可选）
  email: '',     // 用户邮箱
  content: ''    // 留言内容
})

/**
 * 表单验证错误信息对象
 * @description 存储表单验证的错误提示信息，用于显示错误状态
 */
const errors = reactive({
  nickname: '',  // 昵称错误信息
  email: '',     // 邮箱错误信息
  content: ''    // 内容错误信息
})

/**
 * 留言列表数据
 * @description 存储所有留言的数组，包含留言的完整信息
 */
const comments = ref<GuestbookComment[]>([])

/**
 * 统计数据
 * @description 存储留言板统计数据
 */
const stats = ref<GuestbookStats>({
  totalComments: 0,
  todayComments: 0,
  activeUsers: 0
})

// ==================== 计算属性 ====================

/**
 * 分页后的留言列表
 * @description 根据当前页码和页面大小计算要显示的留言
 * @returns 当前页的留言数组
 */
const paginatedComments = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value
  const endIndex = startIndex + pageSize.value
  return comments.value.slice(startIndex, endIndex)
})

/**
 * 总留言数
 * @description 计算留言总数，用于统计显示
 * @returns 留言总数
 */
const totalComments = computed(() => stats.value.totalComments)

/**
 * 今日留言数
 * @description 计算今日留言数量，用于统计显示
 * @returns 今日留言数量
 */
const todayComments = computed(() => stats.value.todayComments)

/**
 * 活跃用户数
 * @description 计算活跃用户数量（去重后的用户数），用于统计显示
 * @returns 活跃用户数量
 */
const activeUsers = computed(() => stats.value.activeUsers)

// ==================== 方法函数 ====================

/**
 * 使用示例数据
 * @description 当API请求失败时使用示例数据
 */
const useSampleData = () => {
  comments.value = [...sampleComments]
  stats.value = { ...sampleStats }
  isUsingSampleData.value = true
}

/**
 * 获取留言列表
 * @description 从后端API获取留言列表数据
 */
const fetchComments = async () => {
  try {
    isLoading.value = true
    errorMessage.value = ''
    isUsingSampleData.value = false // 重置示例数据标识

    const response = await get(API_PATHS.GUESTBOOK.LIST)

    if (response.success && response.data) {
      comments.value = response.data
      console.log('获取留言列表成功:', response.data)
    } else {
      // API返回错误，使用示例数据
      errorMessage.value = response.error || '获取留言列表失败'
      console.error('获取留言列表失败:', response.error)
      useSampleData()
      ElMessage.warning('后端服务暂时不可用，显示示例数据')
    }
  } catch (error) {
    // 网络错误或其他异常，使用示例数据
    errorMessage.value = error instanceof Error ? error.message : '网络请求失败'
    console.error('获取留言列表异常:', error)
    useSampleData()
    ElMessage.warning('网络连接失败，显示示例数据')
    
    // 开发环境下输出详细错误信息
    if (import.meta.env.DEV) {
      console.error('详细错误信息:', error)
    }
  } finally {
    isLoading.value = false
  }
}

/**
 * 获取留言统计
 * @description 从后端API获取留言统计数据
 */
const fetchStats = async () => {
  try {
    const response = await get(API_PATHS.GUESTBOOK.STATS)

    if (response.success && response.data) {
      stats.value = response.data
      console.log('获取留言统计成功:', response.data)
    } else {
      // API返回错误，使用示例统计数据
      console.error('获取留言统计失败:', response.error)
      if (!isUsingSampleData.value) {
        stats.value = { ...sampleStats }
      }
    }
  } catch (error) {
    // 网络错误或其他异常，使用示例统计数据
    console.error('获取留言统计异常:', error)
    if (!isUsingSampleData.value) {
      stats.value = { ...sampleStats }
    }
    
    // 开发环境下输出详细错误信息
    if (import.meta.env.DEV) {
      console.error('详细错误信息:', error)
    }
  }
}

/**
 * 点赞留言
 * @description 对指定留言进行点赞操作
 * @param commentId 留言ID
 */
const likeComment = async (commentId: number) => {
  try {
    // 如果正在使用示例数据，只更新本地状态，不调用API
    if (isUsingSampleData.value) {
      const comment = comments.value.find(c => c.id === commentId)
      if (comment) {
        comment.isLiked = !comment.isLiked
        comment.likes = comment.isLiked ? (comment.likes || 0) + 1 : Math.max(0, (comment.likes || 1) - 1)
        ElMessage.success(comment.isLiked ? '点赞成功（示例数据）' : '取消点赞成功（示例数据）')
      }
      return
    }

    const response = await post(API_PATHS.GUESTBOOK.LIKE(commentId.toString()))

    if (response.success && response.data) {
      // 更新本地留言数据
      const comment = comments.value.find(c => c.id === commentId)
      if (comment) {
        comment.isLiked = response.data.isLiked
        comment.likes = response.data.likes
      }
      ElMessage.success(response.data.isLiked ? '点赞成功' : '取消点赞成功')
      console.log('点赞操作成功:', response.data)
    } else {
      ElMessage.error(response.error || '点赞操作失败')
      console.error('点赞操作失败:', response.error)
    }
  } catch (error) {
    ElMessage.error('网络请求失败，请稍后重试')
    console.error('点赞操作异常:', error)
    
    // 开发环境下输出详细错误信息
    if (import.meta.env.DEV) {
      console.error('详细错误信息:', error)
    }
  }
}

/**
 * 验证表单数据
 * @description 验证用户输入的表单数据是否符合要求，包括必填项、格式和长度验证
 * @returns {boolean} 验证是否通过
 */
const validateForm = (): boolean => {
  // 重置错误信息
  errors.nickname = ''
  errors.email = ''
  errors.content = ''

  let isValid = true

  // 验证昵称：必填且长度不超过20个字符
  if (!formData.nickname.trim()) {
    errors.nickname = '请输入昵称'
    isValid = false
  } else if (formData.nickname.length > 20) {
    errors.nickname = '昵称不能超过20个字符'
    isValid = false
  }

  // 验证邮箱：必填且格式正确
  if (!formData.email.trim()) {
    errors.email = '请输入邮箱'
    isValid = false
  } else {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRegex.test(formData.email)) {
      errors.email = '请输入有效的邮箱地址'
      isValid = false
    }
  }

  // 验证留言内容：必填且长度在5-500个字符之间
  if (!formData.content.trim()) {
    errors.content = '请输入留言内容'
    isValid = false
  } else if (formData.content.length < 5) {
    errors.content = '留言内容至少需要5个字符'
    isValid = false
  } else if (formData.content.length > 500) {
    errors.content = '留言内容不能超过500个字符'
    isValid = false
  }

  return isValid
}

/**
 * 提交留言
 * @description 验证并提交用户留言，包括表单验证、API调用和状态管理
 */
const submitComment = async () => {
  // 验证表单数据
  if (!validateForm()) {
    return
  }

  // 设置提交状态，防止重复提交
  isSubmitting.value = true

  try {
    // 准备提交数据
    const submitData: SubmitCommentData = {
      nickname: formData.nickname.trim(),
      email: formData.email.trim(),
      content: formData.content.trim()
    }

    // 如果有网站信息，添加到提交数据中
    if (formData.website.trim()) {
      submitData.website = formData.website.trim()
    }

    // 如果正在使用示例数据，只更新本地状态，不调用API
    if (isUsingSampleData.value) {
      // 创建新留言对象
      const newComment: GuestbookComment = {
        id: Date.now(),  // 使用时间戳作为唯一ID
        nickname: submitData.nickname,
        website: submitData.website,
        email: submitData.email,
        content: submitData.content,
        date: new Date().toLocaleString(),  // 使用本地时间格式
        likes: 0,
        isLiked: false
      }

      // 将新留言添加到列表开头，最新的留言显示在最前面
      comments.value.unshift(newComment)

      // 更新统计数据
      stats.value.totalComments++
      stats.value.todayComments++

      // 重置表单数据
      formData.nickname = ''
      formData.website = ''
      formData.email = ''
      formData.content = ''

      // 重置到第一页，确保用户能看到新发表的留言
      currentPage.value = 1

      // 显示成功消息
      ElMessage.success('留言发表成功（示例数据）！')
      console.log('示例数据留言提交成功:', newComment)
      return
    }

    // 调用后端API提交留言
    const response = await post(API_PATHS.GUESTBOOK.SUBMIT, submitData)

    if (response.success && response.data) {
      // 将新留言添加到列表开头，最新的留言显示在最前面
      comments.value.unshift(response.data)

      // 重置表单数据
      formData.nickname = ''
      formData.website = ''
      formData.email = ''
      formData.content = ''

      // 重置到第一页，确保用户能看到新发表的留言
      currentPage.value = 1

      // 显示成功消息
      ElMessage.success('留言发表成功！')
      console.log('留言提交成功:', response.data)

      // 重新获取统计数据
      await fetchStats()
    } else {
      ElMessage.error(response.error || '留言发表失败，请稍后重试')
      console.error('留言提交失败:', response.error)
    }
  } catch (error) {
    ElMessage.error('网络请求失败，请稍后重试')
    console.error('留言提交异常:', error)
    
    // 开发环境下输出详细错误信息
    if (import.meta.env.DEV) {
      console.error('详细错误信息:', error)
    }
  } finally {
    // 重置提交状态
    isSubmitting.value = false
  }
}

/**
 * 格式化日期显示
 * @param dateString 日期字符串
 * @description 将日期格式化为相对时间显示，提供更好的用户体验
 * @returns {string} 格式化后的日期字符串
 */
const formatDate = (dateString: string): string => {
  const date = new Date(dateString)
  const now = new Date()
  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)

  // 根据时间差返回不同的相对时间格式
  if (diffInSeconds < 60) {
    return '刚刚'
  } else if (diffInSeconds < 3600) {
    return `${Math.floor(diffInSeconds / 60)}分钟前`
  } else if (diffInSeconds < 86400) {
    return `${Math.floor(diffInSeconds / 3600)}小时前`
  } else if (diffInSeconds < 2592000) {
    return `${Math.floor(diffInSeconds / 86400)}天前`
  } else {
    return date.toLocaleDateString()  // 超过一个月显示具体日期
  }
}

/**
 * 回复留言
 * @param commentId 留言ID
 * @description 处理回复留言的功能
 */
const replyToComment = async (commentId: number) => {
  try {
    // 如果正在使用示例数据，显示提示信息
    if (isUsingSampleData.value) {
      ElMessage.info('回复功能（示例数据）正在开发中...')
      console.log('示例数据回复留言:', commentId)
      return
    }

    // TODO: 实现回复功能的具体逻辑
    // 这里可以打开一个回复对话框，让用户输入回复内容
    // 然后调用 API_PATHS.GUESTBOOK.REPLY(commentId.toString()) 接口
    
    ElMessage.info('回复功能正在开发中...')
    console.log('回复留言:', commentId)
  } catch (error) {
    ElMessage.error('回复操作失败，请稍后重试')
    console.error('回复留言异常:', error)
    
    // 开发环境下输出详细错误信息
    if (import.meta.env.DEV) {
      console.error('详细错误信息:', error)
    }
  }
}

/**
 * 处理分页组件页面大小变化
 * @param size 新的页面大小
 * @description 当用户改变每页显示的留言数量时，更新页面大小并重置到第一页
 */
const handleSizeChange = (size: number) => {
  // 更新页面大小
  pageSize.value = size
  // 重置到第一页，确保用户能看到第一页的内容
  currentPage.value = 1
}

/**
 * 处理分页组件当前页码变化
 * @param page 新的页码
 * @description 当用户点击分页组件中的页码时，更新当前页码
 */
const handleCurrentChange = (page: number) => {
  // 更新当前页码
  currentPage.value = page
}

// ==================== 生命周期钩子 ====================

/**
 * 组件挂载时获取数据
 * @description 在组件挂载时自动获取留言列表和统计数据
 */
onMounted(async () => {
  await fetchComments()
  await fetchStats()
})
</script>

<style scoped lang="scss">
// 导入留言板页面组件样式
@use '../assets/styles/clients/_guestbook';
</style>